<template>
  <div class="box">
    <!-- 右侧固定定位的小图标 -->
    <div class="audioOverLay" @click="lay()" v-if="data.audio">
      <div class="radius">
        <div class="small"></div>
      </div>
    </div>

    <HeaderTop
      :isActive="isActive"
      :data="title.length !== 0 ? title[0].title : titleTR.slice(0, 2)"
    ></HeaderTop>

    <div class="contents" v-if="data.json_content">
      <div class="title" @click="gobar()">{{ data.title }}</div>
      <div class="author">
        {{ data.json_content.simple_author[0] }}
      </div>
      <!-- 阅读文章的播放器 -->
      <div class="playerBox" v-if="data.audio">
        <div class="player" @click="play(open)">
          <div class="playerN">
            <div class="playEnd">
              <div>
                <span> <van-icon name="volume-o" /></span>
                <span class="right" v-if="data.anchor"
                  >有声阅读 | {{ data.anchor }}</span
                >
              </div>
              <div>
                {{ timer ? timer : "00:00" }}
              </div>
            </div>
          </div>
        </div>
        <!-- 进度条 -->
        <div ref="bars" class="ProgressBar"></div>
        <!-- controls 是否显示音乐默认模板 -->
        <audio ref="audio" @canplay="durations" :src="data.audio">
          <!-- <source :src="data.audio" type="audio/ogg">
          <source :src="data.audio" type="audio/mpeg">
          您的浏览器不支持 audio 元素 -->
        </audio>
      </div>
      <!-- 文章主体内容 -->
      <div
        class="contitle"
        v-if="data.json_content"
        v-html="data.json_content.content"
      ></div>

      <!-- 文章底部作者及编辑人的信息与评论  拆分成组件，方便复用-->
      <editor :edit="data" :comments="comments"></editor>

      <!-- 底部栏发布评论功能及分享 的组件-->
    </div>
    <bottomBar :data="data"></bottomBar>
    <!-- 播放器遮罩层 -->
    <van-overlay :show="show">
      <div class="wrapper" @click.stop="show = false">
        <div class="block" @click.stop>
          <div style="color: #bbbbbb; font-size: 14px">{{ data.title }}</div>
          <div class="Progressbar">
            <div class="Bared" ref="barss">
              <div class="radiusN"></div>
            </div>
          </div>
          <div style="color: #bbbbbb" class="layanchor" v-if="data.anchor">
            {{ data.anchor }}
          </div>
          <div class="audiocontrol" @click="play(open)">
            <img src="../../assets/fill_media_previous.png" alt="" />
            <div class="playControl">
              <van-icon name="pause-circle-o" size="30" v-if="open === false" />
              <van-icon name="play-circle-o" size="30" v-else />
            </div>
            <img src="../../assets/fill_media_next.png" alt="" />
          </div>
          <div class="leftandright">
            <!-- <div><van-icon name="service-o" /></div>
            <div><van-icon name="music-o" /></div> -->
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import HeaderTop from "@/components/headerTop.vue";
import { getArticleContent, getComment } from "@/api/articlesPage";
import Editor from "@/components/editor.vue";
import bottomBar from "@/components/bottomBar.vue";
export default {
  components: { HeaderTop, Editor, bottomBar },
  name: "articlesPage",
  data() {
    return {
      data: {},
      open: true,
      timer: "",
      opens: null,
      bar: 1,
      title: JSON.parse(this.$route.query.title),
      titleTR: decodeURIComponent(this.$route.query.titleTR),
      commentId: "0",
      comments: {},
      show: false,
      isActive: true,
    };
  },
  created() {
    this.getArticle();
    // console.log(decodeURIComponent(this.$route.query.titleTR));
    console.log(this.titleTR, this.title);
    //  this.$nextTick(()=>{
    //    this.durations()
    //  })
  },

  mounted() {
    // this.durations()
    // console.log(this.$refs.audio.duration);
    // console.dir("mounted打印时间",this.$refs.audio.duration)
  },
  beforeDestroy(){
    this.play()
  },
  computed: {
    //   duration(){
    //      return this.$refs.audio.duration
    //  }
  },
  //info.vue
  beforeRouteLeave(to, form, next) {
    to.meta.keepAlive = true;
    next(0);
  },
  methods: {
    // lay 播放器遮罩层方法
    lay() {
      this.show = true;
    },

    // 获取文章内容
    async getArticle() {
      const { data } = await getArticleContent(this.$route.query.id, "essay");
      this.data = data;
      console.log(this.data);
      if (this.data.json_content) {
        this.getComments();
      }
    },
    async getComments() {
      // 获取阅读的评论
      const { data } = await getComment(
        this.data.json_content.type,
        this.data.id,
        this.commentId
      );
      this.comments = data;
      console.log(this.comments);
    },
    // 播放方法
    play(open) {
      console.log(this.$refs.audio.duration); //音频总时长
      console.log(this.$refs.audio.currentTime); //当前播放时间
      if (open) {
        this.$refs.audio.play();
        // 重复执行一段代码，用来显示剩余时间数
        //  this.lesG0()
        this.opens = setInterval(() => {
          this.durations();
          console.log("循环中");
        }, 1000);
      } else {
        this.$refs.audio.pause();
        clearInterval(this.opens);
      }
      this.open = !open;
    },

    durations() {
      let total =
        parseInt(this.$refs.audio.duration) -
        parseInt(this.$refs.audio.currentTime);
      let minute = total % 60;
      let seconds = (total - minute) / 60;
      this.timer = seconds + ":" + (minute < 10 ? "0" + minute : minute);
      //  console.log("这是一份是多少",parseInt(this.$refs.audio.currentTime/this.$refs.audio.duration)*100) 错误的
      // console.log('播放状态', this.$refs.audio.paused);

      this.gobar();
    },
    //  进度条方法 音频播放就启动
    gobar() {
      let i = (this.$refs.audio.currentTime / this.$refs.audio.duration) * 100;
      console.log(i);
      this.$refs.bars.style.width = i + "%";
      this.$refs.barss.style.width = i + "%";
    },
    //  this.$refs.audio.paused  当前音频状态
  },
  watch: {
    timer: function (newvalue, oldvalue) {
      console.log("侦听器", newvalue);
      if (newvalue == "0:0") {
        this.open = true;
        //  播放完后给open赋值true，下次点击播放时可以立即从头播放
        // console.log('播放完', this.open);
        clearInterval(this.opens);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 100%;
  z-index: 999999;
}

.block {
  width: 100%;
  height: 140px;
  background-color: #fff;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  .Progressbar {
    width: 100%;
    height: 2px;
    background: gray;
    margin: 10px 0 15px 0;
    position: relative;
    .Bared {
      position: absolute;
      top: -2px;
      left: 0;
      width: 0%;
      height: 5px;
      background: palegreen;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  }
  .layanchor {
    font-size: 12px;
  }

  .audiocontrol {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    .playControl {
      margin: 0 10px;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
  .leftandright {
    display: flex;
    justify-content: space-between;
  }
}
.box {
  width: 100%;

  background-color: #ffffff;
  box-sizing: border-box;
  .audioOverLay {
    position: fixed;
    top: 60px;
    right: 0;
    width: 30px;
    height: 10px;
    background: gray;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    .radius {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #000000;
      position: relative;
      .small {
        position: absolute;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: #fff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .contents {
    padding: 20px 15px 0 15px;
    margin-top: 30px;
    width: 375px;
    box-sizing: border-box;

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    .author {
      font-size: 12px;
      color: #000000;
      margin-bottom: 20px;
    }

    .playerBox {
      position: relative;
      margin-bottom: 20px;

      .player {
        width: 100%;
        height: 30px;
        background-color: #ffffff;
        border: 1px solid #000000;
        border-radius: 3px;
        display: flex;
        align-items: center;
        font-size: 12px;

        .playerN {
          padding: 0 5px;
          width: 345px;

          .playEnd {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .right {
              margin-left: 10px;
            }
          }
        }
      }

      .ProgressBar {
        width: 345px;
        height: 30px;
        position: absolute;
        top: 0;
        background: gray;
        opacity: 0.5;
        pointer-events: none;
      }
    }

    ::v-deep .contitle {
      img {
        width: 345px;
      }
      .one-img-container {
        img {
          width: 345px;
        }
      }
    }
  }
}
</style>